<template>
  <div>
    <div id="getcar">
      <h2>
        <i>我要办卡</i>
        <a>更多</a>
      </h2>
      <div id="content">
        <div id="imgtxt">
          <img src="@/assets/Cerditcar/Cerditcar-1.png" alt="" />
          <p>背景东奥信用卡<br />+全球支付Visa卡</p>
          <i>新客户办卡，消费达标送冰墩墩</i>
        </div>
        <div id="imgtxt">
          <img src="@/assets/Cerditcar/Cerditcar-2.png" alt="" />
          <p>全球支付万事达卡</p>
          <i>新客户办卡享258元礼包</i>
        </div>
        <div id="imgtxt">
          <img src="@/assets/Cerditcar/Cerditcar-3.png" alt="" />
          <p>龙卡bilibili信用卡</p>
          <i>新客户办卡享两年B站大会员</i>
        </div>
      </div>
    </div>
    <div id="car">
      <h2>龙卡汽车卡</h2>
      <a href=""><img src="@/assets/Cerditcar/Car-up.png" alt="" /></a>
      <div id="imags">
        <a href=""><img src="@/assets/Cerditcar/Car-D-L.png" alt="" /></a>
        <a href=""><img src="@/assets/Cerditcar/Car-D-C.png" alt="" /></a>
        <a href=""><img src="@/assets/Cerditcar/Car-D-R.png" alt="" /></a>
      </div>
    </div>
    <div id="activity">
      <h2>
        <i>热门活动</i>
        <a>更多</a>
      </h2>
      <div id="actbox">
        <a href=""><img src="@/assets/Cerditcar/activity-L.png" alt="" /></a>
        <a href=""><img src="@/assets/Cerditcar/activity-C.png" alt="" /></a>
        <a href=""><img src="@/assets/Cerditcar/activity-R.png" alt="" /></a>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
#getcar {
  width: 100%;
  height: 1.48rem;
  margin-bottom: 0.3rem;
  h2 {
    width: 100%;
    height: 0.46rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    i {
      font-weight: 700;
    }
    a {
      font-size: 0.12rem;
      color: #d4d4d4;
    }
  }
  #content {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
    #imgtxt {
      width: 33.33%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
      img {
        width: 1rem;
        height: 0.64rem;
      }
      p {
        font-size: 0.12rem;
        font-weight: 700;
      }
      i {
        width: 150%;
        font-size: 0.12rem;
        transform: scale(0.7);
        color: #c7c7c7;
      }
    }
  }
}
#car {
  width: 100%;
  height: 2.44rem;
  display: flex;
  flex-direction: column;
  h2 {
    width: 100%;
    height: 0.46rem;
    font-weight: 700;
    text-align: left;
  }
  a {
    img {
      width: 100%;
      height: 0.8rem;
    }
  }
  #imags {
    margin-top: 0.06rem;
    display: flex;
    justify-content: space-between;
    img {
      width: 1.1rem;
      height: 1.1rem;
    }
  }
}
#activity {
  width: 100%;
  height: 1.7rem;
  margin-bottom: 0.2rem;
  h2 {
    width: 100%;
    height: 0.46rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    i {
      font-weight: 700;
    }
    a {
      font-size: 12px;
      color: #d4d4d4;
    }
  }
  #actbox {
    display: flex;
    justify-content: space-between;
    img {
      width: 1.1rem;
    }
  }
}
</style>